<template>
	<view>
		<view class="bg">
			<!-- 轮播图 start -->
			<view class="banner-model">
				<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="item in banner" :key="item.id">
						<image class="banner-img" :src="item.img" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 轮播图 end -->
			<!-- 机构信息模块 start -->
			<view class="other-bpx">
				<view class="information">
					<view class="information-left">
						<view class="information-left-title">中科博爱（北京）咨询有限公司</view>
						<view class="information-left-box">
							<view class="information-left-box-img">
								<image class="information-left-box-img-img information-left-box-img-img-padding"
									src="/static/agency/location.png" mode="widthFix"></image>
							</view>
							<view class="information-left-box-title">
								北京市顺义区后沙峪地区绿地启航国际南区2号楼7层
							</view>
						</view>
						<view class="information-left-box">
							<view class="information-left-box-img">
								<image class="information-left-box-img-img" src="/static/agency/tele.png"
									mode="widthFix"></image>
							</view>
							<view class="information-left-box-title">
								联系方式：137xxxxxx56
							</view>
						</view>
						<view class="information-left-box">
							<view class="information-left-box-img">
								<image class="information-left-box-img-img" src="/static/agency/clock.png"
									mode="widthFix"></image>
							</view>
							<view class="information-left-box-title">
								09 : 00 - 18 : 00 开放
							</view>
						</view>
					</view>
					<view class="information-right">
						<view class="information-right-img">
							<image class="information-right-img-img" src="/static/agency/share.png" mode="widthFix">
							</image>
						</view>
						<view class="information-right-img">
							<image class="information-right-img-img" src="/static/agency/phone.png" mode="widthFix">
							</image>
						</view>
						<view class="information-right-img">
							<image class="information-right-img-img" src="/static/agency/map.png" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
			</view>
			<!-- 机构信息模块 end -->

			<view class="model-box">
				<!-- 特别提醒 start -->
				<view class="prompt-layer">
					<view class="prompt">
						<view class="prompt-title">
							<view class="prompt-title-name">
								特别提醒
							</view>
							<view class="prompt-title-name-inc">
								<image class="prompt-title-name-inc-img" src="/static/consultant/trumpet.png" mode="">
								</image>
							</view>
						</view>
						<view class="prompt-title-text">
							周一至周五的开放时间为9:00-21:00
							周末的开放时间为9:00-18:00
						</view>
					</view>
				</view>
				<!-- 特别提醒 end -->
				<!-- 机构介绍 start -->

				<view class="institutional-introduction">
					<view class="public-title">
						机构介绍
					</view>
					<view class="public-text">
						个体咨询室是一个私密、安全的空间，专为一对一的心理咨询而设计。室内通常布置简洁，避免过多的装饰分散来访者的注意力。舒适的沙发和座椅，让来访者能够以最放松的状态与咨询师交流。柔和的灯光有助于营造出温暖、信任的氛围。在这里，咨询师会全神贯注地倾听你的故事、困惑和烦恼，与你一起探讨问题的根源，共同寻找解决问题的方法。个体咨询室为你提供了一个可以毫无顾忌地倾诉内心深处感受的地方，让你在咨询师的专业引导下，更好地认识自己、理解自己，实现个人成长和心理调适。
					</view>
				</view>
				<!-- 机构介绍 end -->
				<!-- 咨询室介绍 start -->
				<view class="room-introduction">
					<view class="public-title">
						咨询室介绍
					</view>
					<view class="public-text">
						个体咨询室是一个私密、安全的空间，专为一对一的心理咨询而设计。室内通常布置简洁，避免过多的装饰分散来访者的注意力。舒适的沙发和座椅，让来访者能够以最放松的状态与咨询师交流。柔和的灯光有助于营造出温暖、信任的氛围。在这里，咨询师会全神贯注地倾听你的故事、困惑和烦恼，与你一起探讨问题的根源，共同寻找解决问题的方法。个体咨询室为你提供了一个可以毫无顾忌地倾诉内心深处感受的地方，让你在咨询师的专业引导下，更好地认识自己、理解自己，实现个人成长和心理调适。
					</view>
				</view>
				<!-- 咨询室介绍 end-->
				<!-- 立即预订 start -->
				<view class="appointment-box">
					<view class="appointment-button">
						立即预约
					</view>
				</view>
				<!-- 立即预订 end -->
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播图数据
				banner: [{
						id: 1,
						img: "/static/banner/one.jpg",
						url: 'https://www.iepsy.com/'
					},

					{
						id: 2,
						img: "/static/banner/two.jpg",
						url: 'https://www.iepsy.com/'
					},
					{
						id: 3,
						img: "/static/banner/three.jpg",
						url: 'https://www.iepsy.com/'
					},
					{
						id: 4,
						img: "/static/banner/four.jpg",
						url: 'https://www.iepsy.com/'
					},
				],

			}
		},
		methods: {

		}
	}
</script>

<style>
	.bg {
		width: 750rpx;
		height: 100%;
		background-color: #CECECE;
	}

	/* banner导航  start*/
	.banner-model {
		width: 750rpx;
		height: 465rpx;

	}

	.banner {
		width: 750rpx;
		height: 470rpx;
		display: inline-block;
		overflow: hidden;
	}

	.banner .banner-img {
		width: 100%;
	}

	/* banner导航  end*/
	/* 机构信息样式 start */
	.other-bpx {
		width: 750rpx;
		height: 470rpx;
		padding: 0rpx 15rpx;
	}

	.information {
		width: 725rpx;
		height: 500rpx;
		background-color: #fff;
		border-radius: 25rpx;
		transform: translateY(-80rpx);
		display: flex;
		overflow: hidden;
		padding: 25rpx;
		box-sizing: border-box;

	}

	.information-left {
		width: 620rpx;
		height: 500rpx;

	}

	.information-right {
		width: 100rpx;
		height: 500rpx;
		padding: 20rpx 30rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;

	}

	/* 中间悬浮盒子样式  start*/
	.information-left-title {
		font-size: 35rpx;
		padding: 5rpx;
		color: black;
		padding: 20rpx 10rpx;
		font-weight: 600;

	}

	.information-left-box {
		width: 100%;
		display: flex;
		padding: 40rpx 0rpx;
	}

	.information-left-box-img {
		width: 40rpx;
		height: 40rpx;
		padding-right: 15rpx;

	}

	.information-left-box-img-img-padding {
		padding: 20rpx 10rpx 0rpx 0rpx;
	}

	.information-left-box-img-img {
		width: 40rpx;
		height: 100%;

	}

	.information-right-img {
		width: 60rpx;
		height: 160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.information-right-img-img {
		width: 60rpx;
		height: 60rpx;
	}

	/* 机构信息样式 end */
	.model-box {
		width: 100%;
		background-color: #CECECE;

	}

	/* 消息提示模块 start */
	.prompt-layer {
		width: 370px;
		background-color: #fff;
		border-radius: 25rpx;
		border: 1rpx solid #FCCA00;
		box-sizing: border-box;
		margin: 0rpx auto 45rpx;
		overflow: hidden;
	}

	.prompt {
		width: 100%;
		padding: 15rpx;
		/* background-color: #E99D42;
		opacity: 0.19; */
		background-color: rgba(233, 157, 66, 0.19);


	}

	.prompt-title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		opacity: 1 !important;
		box-sizing: border-box;
		padding: 15rpx 40rpx;


	}

	.prompt-title-name {
		font-size: 45rpx;
		font-weight: 600;
		color: #E99D42;
		opacity: 1 !important;
		padding-top: 15rpx;

	}

	.prompt-title-name-inc {
		width: 80rpx;
		height: 80rpx;
		opacity: 1 !important;
	}

	.prompt-title-name-inc-img {
		width: 80rpx;
		height: 80rpx;
		opacity: 1 !important;
	}

	.prompt-title-text {
		color: #E99D42;
		font-size: 40rpx;
		padding: 10rpx 37rpx;
		line-height: 85rpx;
		box-sizing: border-box;
	}

	/* 消息提示模块 start */
	/* 机构介绍 strart */
	.institutional-introduction {
		width: 100%;
		box-sizing: border-box;
	}

	.public-title {
		font-size: 45rpx;
		padding: 15rpx 45rpx;
	}

	.public-text {
		width: 705rpx;
		margin: 20rpx auto;
		border: 1rpx solid #CECECE;
		padding: 20rpx;
		border-radius: 25rpx;
		background-color: #fff;
		box-sizing: border-box;
		font-size: 35rpx;
		line-height: 60rpx;
	}

	/* 机构介绍 end */
	/* 咨询室介绍 start */
	.room-introduction {
		width: 100%;
		box-sizing: border-box;
	}

	.appointment-box {
		padding: 80rpx 0rpx;
	}

	.appointment-button {
		width: 190rpx;
		padding: 30rpx 45rpx;
		font-size: 45rpx;
		background-color: #4095E5;
		border-radius: 25rpx;
		margin: 0rpx auto;
	}

	/* 咨询室介绍 end */
</style>